<template>
  <div>
    <!--
      必填:
      action 上传地址,这里没有就给个 #
      file-list 管理图片的数组

      样式:
      list-type 决定了样式
      class 动态 class 可以在有图片情况下隐藏加号
    -->
    <el-upload
      action="#"
      :file-list="fileList"
      list-type="picture-card"
      :class="{ disable: fileList.length > 0 }"
      :on-preview="preview"
      :on-remove="onRemove"
      :http-request="upload"
      :on-change="onChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress
      v-if="showProgress"
      :percentage="percent"
      :show-text="false"
      style="width: 146px"
    />
    <el-dialog
      title="预览图片"
      :visible="showDialog"
      @close="showDialog = false"
    >
      <el-row type="flex" justify="center">
        <img :src="imgUrl" alt="" />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
// 创建实例
const cos = new COS({
  SecretId: "AKIDf5JJ5dx2rRnypQnvnPlrhptb1DBtPhkY",
  SecretKey: "cz71jDSSEl37ybzA73h5E8qGRN5YmmY5",
});
export default {
  data() {
    return {
      // 图片管理数组
      fileList: [],
      showDialog: false,
      imgUrl: "",
      showProgress: false,
      percent: 0,
    };
  },
  methods: {
    preview(data) {
      this.imgUrl = data.url;
      this.showDialog = true;
    },
    onRemove(file, newFileList) {
      this.fileList = [...newFileList];
    },
    onChange(file, newFileList) {
      this.fileList = [...newFileList];
    },
    beforeUpload(file) {
      // console.log(file);
      // 校验大小
      const maxSize = 200 * 1024000;
      if (file.size > maxSize) {
        this.$message.warning("图片最多只能上传 200k");
        return false;
      }
      // 校验格式
      const whiteList = ["image/jpeg", "image/png"];
      if (whiteList.indexOf(file.type) === -1) {
        this.$message.warning("图片只能上传jepg和png格式");
        return false;
      }
    },
    upload(data) {
      console.log(data.file);
      this.showProgress = true;
      cos.putObject(
        {
          // 储存桶名称
          Bucket: "fyh66-1307117925",
          // 所在区域
          Region: "ap-nanjing",
          // 想要保存的文件名
          Key: data.file.name,
          // 标准储存的固定写法不用改
          StorageClass: "STANDARD",
          // 图片本身
          Body: data.file, // 上传文件对象
          onProgress: (progressData) => {
            // 进度发生变化的回调
            console.log("进度变化", JSON.stringify(progressData));
            this.percent = progressData.percent * 100;
          },
        },
        (err, data) => {
          // 上传结束后的回调(无论成功或者失败)
          console.log(err || data);
          if (!err) {
            console.log(data);
            // 这里是异步, element 不知道什么时候上传完
            // 上传完毕需要后续处理数据,
            // 1. 用腾讯云地址覆盖原来本地图片
            // 2. 告诉element 上传已经成
            this.fileList[0].url = `http://${data.Location}`;
            this.fileList[0].status = "success";

            setTimeout(() => {
              this.showProgress = false;
            }, 800);
          }
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.disable {
  // /deep/ .el-upload--picture-card {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>